<template>
  <c-select
    v-bind="$attrs"
    v-on="$listeners"
    :loading="loading"
    :value="value"
    :options="cateFilterList"
    :props="{ label: 'realName', value: 'userId' }"
    @change="handleItemChange"
  ></c-select>
</template>

<script>
export default {
  components: {},
  props: {
    value: String,
    includeJob: {
      type: Array,
      default: () => [],
    },
    isDefaultDept: {
      type: Boolean,
      default: false,
    },
  },
  model: {
    prop: 'value',
    event: 'change',
  },
  data() {
    return {
      loading: false,
    }
  },
  computed: {
    cateList() {
      return this.$store.getters.staff.filter(item => item.job !== 'org_credit_super')
    },
    cateFilterList() {
      let data = this.cateList
      if (this.isDefaultDept) {
        data = this.cateList.filter(item => +item.deptId === 0) || []
      }
      if (this.includeJob.length) {
        return data.filter(item => this.includeJob.includes(item.job))
      } else {
        return data
      }
    },
  },
  watch: {},
  created() {
    this.getData()
  },
  mounted() {},
  methods: {
    async getData() {
      this.loading = true
      await this.$store.dispatch('getStaff')
      this.loading = false
    },
    handleItemChange(val) {
      this.$emit('change', val)
      this.$nextTick(() => {
        const item = this.cateList.find(it => it.userId === val) || {}
        this.$emit('select', item)
      })
    },
    getSelectedName() {
      const item = this.cateList.find(it => it.userId === this.value)
      return (item && item.realName) || ''
    },
  },
}
</script>

<style scoped></style>
